<template>
  <div class="w-full flex items-center gap-3 overflow-hidden rounded-1 bg-white p-3">
    <img :src="fileBaseUrl + data.pic" class="h-15 rounded-2" alt="">
    <div class="flex flex-1 flex-col justify-between gap-2 overflow-hidden text-nowrap leading-none">
      <div class="flex overflow-hidden text-#C49F6E">
        <span class="max-w-20 truncate p-r-1">{{ data.name }}</span>
        <span class="text-#333">兑换了</span>
        <span class="flex-1 truncate p-l-1">{{ data.goodsName }}</span>
      </div>
      <div class="text-#999999">
        {{ dayjs(data.createTime).format('YYYY-MM-DD') }}
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import dayjs from 'dayjs'
import type { IOrderData } from '@/api/home/types'

interface Props {
  data: IOrderData
}

withDefaults(defineProps<Props>(), {
  data: () => ({} as IOrderData),
})

const fileBaseUrl = import.meta.env.VITE_GLOB_IMG_URL
</script>

<style lang='less' scoped>
</style>
